import { element } from 'protractor';
import { Component, OnInit,Input,Output,ElementRef,ViewChild,EventEmitter,SimpleChanges } from '@angular/core';

@Component({
  selector: 'el-checkbox',
  templateUrl: './el-checkbox.component.html',
  styleUrls: ['./el-checkbox.component.css','./checkbox.css']
})
export class ElCheckboxComponent implements OnInit {


    private value:any;
    public isChecked:boolean
    

    @Input() label:string|number;
    @Input() disabled:boolean=false;
    // @Input() checked:boolean=false;
    @Input() name:string;
    @Input() trueLabel:string|number;
    @Input() falseLabel:string|number;
    @Input() indeterminate:boolean=false;
    @Input() isGroup:boolean=false;
    @Input() checked:boolean=false
    @Input() model:any;
    @Input() min:number
    @Input() max:number
    @Output() modelChange:EventEmitter<any>=new EventEmitter<any>();

    @ViewChild('elCheckboxInput')  elCheckboxInput:ElementRef;
    @ViewChild('ipt')  ipt:ElementRef;

    focus:boolean;

    constructor() { }


    ngOnInit() {
        this.isChecked=this.checked||this.getIsChecked();
        this.setClass()
    }
    ngOnChanges(changes:SimpleChanges){
        // console.log(changes);
        if(changes['model']&&!changes['model'].firstChange){
          this.isChecked=this.getIsChecked();
        }
        this.setClass()
    }

    handleChange(e){
        // console.log(this.isChecked);
        const elCheckboxInput=this.elCheckboxInput.nativeElement;
        if(this.isChecked){
            if(this.isGroup){
                 if(this.model.length>=this.max){
                     this.isChecked=false;
                     this.ipt.nativeElement.checked=false;
                     return;
                 }
                 
            }
            if(elCheckboxInput.className.indexOf('is-checked')===-1){
                elCheckboxInput.className=elCheckboxInput.className+' is-checked';
            }
            
        }else{
            if(this.isGroup){
                if(this.model.length<=this.min){
                    this.ipt.nativeElement.checked=false
                    this.isChecked=true;
                    return;
                }
            }
            elCheckboxInput.className=elCheckboxInput.className.replace('is-checked','')
        };
        this.changeModel(this.isChecked);
    }
    handleFocus(){
        this.focus=true;
    }
    handleBlur(){
        this.focus=false;
    }
    getIsChecked(){
        if({}.toString.call(this.model)==='[object Boolean]'){
            return this.model
        }else if(Array.isArray(this.model)){
            return this.model.indexOf(this.label)>-1
        }else if(this.model!==null&&this.model!==undefined){
          return this.model===this.trueLabel;
        }
    }

    setClass(){
        let classList=['el-checkbox__input'];
        if(this.disabled){
            classList.push('is-disabled');
        }
        if(this.isChecked){
            classList.push('is-checked')
        }
        if(this.indeterminate){
            classList.push('is-indeterminate')
        }
        if(this.focus){
            classList.push('is-focus');
        }
        this.elCheckboxInput.nativeElement.className=classList.join(' ')
    }

    changeModel(checked:boolean){
        if(checked){
            if(this.isGroup&&Array.isArray(this.model)&&this.model.indexOf(this.label)===-1){
                this.model.push(this.label);
            }else if(!this.isGroup){
                this.model=this.trueLabel||true;

            }
        }else{
            if(this.isGroup&&Array.isArray(this.model)&&this.model.indexOf(this.label)>-1){
                this.model.splice(this.model.indexOf(this.label),1)
            }else if(!this.isGroup){
                this.model=this.falseLabel||false;

            }
        }
        this.modelChange.emit(this.model)
    }

}
